import { useEffect, useState } from 'react'
import { Progress, Modal } from 'antd'
import { RightOutlined } from '@ant-design/icons'
import GlobalContext from './GlobalContext'
import '../assets/disk.css'
import Line from './Line'
import DiskParts from './DiskParts'

const { setDiskHt } = window.api.disk

function Disk(props) {
  const [partOpen, setPartOpen] = useState(false)
  const [parts, setParts] = useState([])

  useEffect(() => {
    setDiskHt(props)
  }, [props])

  return (
    <GlobalContext.Consumer>
      {(ctx) => {
        return (
          <>
            <div className="disk-container">
              {props.dSizeDetail &&
                props.dSizeDetail.map((item, idx) => {
                  return (
                    <div key={idx}>
                      <div className="disk-item">
                        <div className="disk-item-top">
                          <div>
                            <span className="square"></span>
                            <span>
                              {process.platform === 'win32'
                                ? `${item.label}(${item.mount})`
                                : `${item.name} ${item.children.length === 1 ? '(' + item.children[0].name + ')' : ''}`}{' '}
                            </span>
                            {item.interfaceType === 'USB' && item.children.length > 1 && (
                              <span
                                className="disk-partitions"
                                onClick={() => {
                                  setPartOpen(true)
                                  setParts(item.children)
                                }}
                              >
                                <RightOutlined style={{ color: 'cornflowerblue' }} />
                              </span>
                            )}
                          </div>
                          <span>{item.size} GB</span>
                        </div>
                        <Progress
                          percent={item.use}
                          format={() => <span className="used-rate">{item.use}%</span>}
                        />
                        <div className="disk-bottom">
                          <span>
                            {item.available} GB {ctx.t('free')}
                          </span>
                          <span>|</span>
                          <span>
                            {item.used} GB {ctx.t('used')}
                          </span>
                        </div>
                      </div>
                      <Line />
                    </div>
                  )
                })}
            </div>
            <Modal
              title={<span className="modal-header">{ctx.t('diskParts')}</span>}
              closeIcon={<div className="modal-close">{ctx.t('close')}</div>}
              footer=""
              open={partOpen}
              onCancel={() => {
                setPartOpen(false)
              }}
              classNames={{
                header: 'modal-header'
              }}
              styles={{
                content: {
                  backgroundColor: '#2c3f50'
                },
                header: {
                  // color: 'white',
                  backgroundColor: '#2c3f50'
                }
              }}
            >
              <DiskParts parts={parts} />
            </Modal>
          </>
        )
      }}
    </GlobalContext.Consumer>
  )
}

export default Disk
